<ng-container *ngIf="isApplicationInspectorActivated$ | async; else guide">
    <article class="l-date-range">
        <pp-timeline-command-group-container></pp-timeline-command-group-container>
        <pp-application-inspector-timeline-container></pp-application-inspector-timeline-container>
    </article>
    <div class="l-main-contents">
        <div class="l-chart-group-wrap">
            <pp-application-jvm-heap-chart-container></pp-application-jvm-heap-chart-container>
            <pp-application-jvm-non-heap-chart-container></pp-application-jvm-non-heap-chart-container>
            <pp-application-jvm-cpu-chart-container></pp-application-jvm-cpu-chart-container>
            <pp-application-system-cpu-chart-container></pp-application-system-cpu-chart-container>
            <pp-application-tps-chart-container></pp-application-tps-chart-container>
            <pp-application-active-thread-chart-container></pp-application-active-thread-chart-container>
            <pp-application-response-time-chart-container></pp-application-response-time-chart-container>
            <pp-application-open-file-descriptor-chart-container></pp-application-open-file-descriptor-chart-container>
            <pp-application-data-source-chart-container></pp-application-data-source-chart-container>
            <div class="l-empty-content"></div>
            <pp-application-direct-buffer-count-chart-container></pp-application-direct-buffer-count-chart-container>
            <pp-application-direct-buffer-memory-chart-container></pp-application-direct-buffer-memory-chart-container>
            <pp-application-mapped-buffer-count-chart-container></pp-application-mapped-buffer-count-chart-container>
            <pp-application-mapped-buffer-memory-chart-container></pp-application-mapped-buffer-memory-chart-container>
        </div>
    </div>
</ng-container>
<ng-template #guide>
    <pp-application-inspector-usage-guide-container></pp-application-inspector-usage-guide-container>
</ng-template>
